// 旋转
.rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}
// 背景色切换
.color-change-2x {
	-webkit-animation: color-change-2x 3s linear infinite alternate both;
	animation: color-change-2x 3s linear infinite alternate both;
}

.change-bg {
  
  background: linear-gradient(-45deg,#a3e9eb,#bdbdf0,#eec1ea);
  background-size: 200% 200%;
  animation: change-bg 5s ease infinite;
}

@keyframes change-bg {
  0% {
    background-position: 0 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0 50%;
}
}

@-webkit-keyframes color-change-2x {
  // 0% {
  //   background-color: #87eef5;
  // }
  // 100% {
  //   background-color: #debaf3;
  // }
  0% {
    background: linear-gradient(180deg,#87eef5,#debaf3);
  }
  100% {
    background: linear-gradient(180deg,#69e6ee,#bf7ae8);
  }
}
@keyframes color-change-2x {
  // 0% {
  //   background-color: #87eef5;
  // }
  // 100% {
  //   background-color: #debaf3;
  // }
  0% {
    background: linear-gradient(180deg,#87eef5,#debaf3);
  }
  100% {
    background: linear-gradient(180deg,#69e6ee,#bf7ae8);
  }
}

@-webkit-keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  

